<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>login-sso</title>
</head>
<body>
<div class="container" id="app">
    <h3>Please Login</h3>
    <form>
        <div class="mb-3">
            <label for="usernameId" class="form-label">Username</label>
            <input type="text" v-model="username" class="form-control" id="usernameId" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="passwordId" class="form-label">Password</label>
            <input type="password" v-model="password" class="form-control" id="passwordId">
        </div>
        <button type="button" @click="doLogin()" class="btn btn-primary">Submit</button>
    </form>
</div>

<script src="js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",//定义监控点，vue底层会基于此监控点在内存中构建dom树
        data: { //此对象中定义页面上要操作的数据
            username: "",
            password: ""
        },
        methods: {//此位置定义所有业务事件处理函数
            doLogin() {
                //1.定义url
                let url = "http://localhost:9999/auth/oauth/token"
                //2.定义参数

                let params = new URLSearchParams()
                params.append('username', this.username);
                params.append('password', this.password);
                params.append('client_id', 'gateway-client');
                params.append('grant_type', 'password');
                params.append('client_secret', '123456');

                console.log('before axios...')

                //3.发送异步请求
                axios.post(url, params).then((response) => {
                    debugger
                    console.log(response.data);
                    let result = response.data;
                    localStorage.setItem("accessToken", result.access_token);
                    location.href = "/fileupload-sso.html"
                })
                //3.发送异步请求
                // axios.post(url, params).then((response) => {
                //     // debugger
                //     console.log('enter axios...')
                //
                //     if (response.data.scope === 'all') {
                //         let result = response.data;
                //         console.log("result", result)//这种输出才会输出内容,不要用加号拼接字符串和对象
                //         localStorage.setItem("accessToken", result.access_token);
                //         alert("login ok");
                //         location.href = "/fileupload-sso.html"
                //         // location.href = "/fileupload.html"
                //     } else if (response.data.error === 'invalid_grant') {
                //         alert('login fail');
                //     }
                // }).catch((exception) => {
                //     console.log(exception)
                //     // alert(exception);
                //
                // }).finally((e)=>{
                //     console.log('this is finally code block')
                //     console.log(e)
                // })
            }
        }
    });
</script>
</body>
</html>
